/* eslint-disable react-refresh/only-export-components */
import React, { useState } from "react";
import { getac, getLocation } from "../../api/info";
import { NavBar, Button, SearchBar, Tabs } from "antd-mobile";
import { useLoaderData, useNavigate } from "react-router-dom";
import styles from "./css/ticket.module.css";
import { LocationFill } from "antd-mobile-icons";
import gg from "../../assets/image/gg.png";
import cc from "../../assets/image/cc.png";
import tam from "../../assets/image/tam.png";
import { InfiniteScroll, List } from "antd-mobile";
function Listt() {
  let { location } = useLoaderData();
  let nav = useNavigate();
  const [hasMore, setHasMore] = useState(true);
  async function loadMore() {
    setHasMore(false);
  }
  const goDetail = () => {
    nav("/detail");
  };
  return (
    <div>
      <NavBar onBack={() => nav(-1)} style={{ background: "#f8f8f8" }}>
        景区门票
      </NavBar>
      <div className={styles.topbox}>
        <span style={{ color: "#7c26ca", position: "fixed", top: "60px" }}>
          <LocationFill fontSize={22} /> {location}
        </span>
        <SearchBar
          placeholder="搜索景区"
          style={{ "--padding-left": "100px" }}
        />
        <span style={{ position: "fixed", top: "60px", right: "12px" }}>
          <Button color="primary" size="mini">
            搜索
          </Button>
        </span>
      </div>
      <Tabs style={{ marginTop: "60px" }}>
        <Tabs.Tab title="默认" key="1">
          <div className={styles.jq} onClick={goDetail}>
            <div>
              <img src={gg} />
            </div>
            <div>
              <h5>故宫博物馆</h5>
              <p>北京 | 距您12.6km</p>
              <p>4.9分 | 3.8万人点评</p>
            </div>
            <div>
              <p
                style={{
                  textAlign: "center",
                  color: "#f60",
                  alignItems: "center",
                  fontSize: "30px",
                  fontWeight: "bold",
                }}
              >
                ￥60<span style={{ color: "#ccc", fontSize: "18px" }}> 起</span>
              </p>
            </div>
          </div>
          <div className={styles.jq} onClick={goDetail}>
            <div>
              <img src={cc} />
            </div>
            <div>
              <h5>八达岭长城</h5>
              <p>北京 | 距您69.5km</p>
              <p>4.9分 | 3.8万人点评</p>
            </div>
            <div>
              <p
                style={{
                  textAlign: "center",
                  color: "#f60",
                  alignItems: "center",
                  fontSize: "30px",
                  fontWeight: "bold",
                }}
              >
                ￥50<span style={{ color: "#ccc", fontSize: "18px" }}> 起</span>
              </p>
            </div>
          </div>
          <div className={styles.jq} onClick={goDetail}>
            <div>
              <img src={tam} />
            </div>
            <div>
              <h5>天安门城楼</h5>
              <p>北京 | 距您13.8km</p>
              <p>4.9分 | 3.8万人点评</p>
            </div>
            <div>
              <p
                style={{
                  textAlign: "center",
                  color: "#f60",
                  alignItems: "center",
                  fontSize: "30px",
                  fontWeight: "bold",
                }}
              >
                ￥20<span style={{ color: "#ccc", fontSize: "18px" }}> 起</span>
              </p>
            </div>
          </div>
          <div className={styles.jq} onClick={goDetail}>
            <div>
              <img src={gg} />
            </div>
            <div>
              <h5>故宫博物馆</h5>
              <p>北京 | 距您12.6km</p>
              <p>4.9分 | 3.8万人点评</p>
            </div>
            <div>
              <p
                style={{
                  textAlign: "center",
                  color: "#f60",
                  alignItems: "center",
                  fontSize: "30px",
                  fontWeight: "bold",
                }}
              >
                ￥60<span style={{ color: "#ccc", fontSize: "18px" }}> 起</span>
              </p>
            </div>
          </div>
          <div className={styles.jq} onClick={goDetail}>
            <div>
              <img src={cc} />
            </div>
            <div>
              <h5>八达岭长城</h5>
              <p>北京 | 距您69.5km</p>
              <p>4.9分 | 3.8万人点评</p>
            </div>
            <div>
              <p
                style={{
                  textAlign: "center",
                  color: "#f60",
                  alignItems: "center",
                  fontSize: "30px",
                  fontWeight: "bold",
                }}
              >
                ￥50<span style={{ color: "#ccc", fontSize: "18px" }}> 起</span>
              </p>
            </div>
          </div>
          <div className={styles.jq} onClick={goDetail}>
            <div>
              <img src={tam} />
            </div>
            <div>
              <h5>天安门城楼</h5>
              <p>北京 | 距您13.8km</p>
              <p>4.9分 | 3.8万人点评</p>
            </div>
            <div>
              <p
                style={{
                  textAlign: "center",
                  color: "#f60",
                  alignItems: "center",
                  fontSize: "30px",
                  fontWeight: "bold",
                }}
              >
                ￥20<span style={{ color: "#ccc", fontSize: "18px" }}> 起</span>
              </p>
            </div>
          </div>
          <div className={styles.jq} onClick={goDetail}>
            <div>
              <img src={gg} />
            </div>
            <div>
              <h5>故宫博物馆</h5>
              <p>北京 | 距您12.6km</p>
              <p>4.9分 | 3.8万人点评</p>
            </div>
            <div>
              <p
                style={{
                  textAlign: "center",
                  color: "#f60",
                  alignItems: "center",
                  fontSize: "30px",
                  fontWeight: "bold",
                }}
              >
                ￥60<span style={{ color: "#ccc", fontSize: "18px" }}> 起</span>
              </p>
            </div>
          </div>
          <div className={styles.jq} onClick={goDetail}>
            <div>
              <img src={cc} />
            </div>
            <div>
              <h5>八达岭长城</h5>
              <p>北京 | 距您69.5km</p>
              <p>4.9分 | 3.8万人点评</p>
            </div>
            <div>
              <p
                style={{
                  textAlign: "center",
                  color: "#f60",
                  alignItems: "center",
                  fontSize: "30px",
                  fontWeight: "bold",
                }}
              >
                ￥50<span style={{ color: "#ccc", fontSize: "18px" }}> 起</span>
              </p>
            </div>
          </div>
          <div className={styles.jq} onClick={goDetail}>
            <div>
              <img src={tam} />
            </div>
            <div>
              <h5>天安门城楼</h5>
              <p>北京 | 距您13.8km</p>
              <p>4.9分 | 3.8万人点评</p>
            </div>
            <div>
              <p
                style={{
                  textAlign: "center",
                  color: "#f60",
                  alignItems: "center",
                  fontSize: "30px",
                  fontWeight: "bold",
                }}
              >
                ￥20<span style={{ color: "#ccc", fontSize: "18px" }}> 起</span>
              </p>
            </div>
          </div>
          <div className={styles.jq} onClick={goDetail}>
            <div>
              <img src={gg} />
            </div>
            <div>
              <h5>故宫博物馆</h5>
              <p>北京 | 距您12.6km</p>
              <p>4.9分 | 3.8万人点评</p>
            </div>
            <div>
              <p
                style={{
                  textAlign: "center",
                  color: "#f60",
                  alignItems: "center",
                  fontSize: "30px",
                  fontWeight: "bold",
                }}
              >
                ￥60<span style={{ color: "#ccc", fontSize: "18px" }}> 起</span>
              </p>
            </div>
          </div>
          <div className={styles.jq} onClick={goDetail}>
            <div>
              <img src={cc} />
            </div>
            <div>
              <h5>八达岭长城</h5>
              <p>北京 | 距您69.5km</p>
              <p>4.9分 | 3.8万人点评</p>
            </div>
            <div>
              <p
                style={{
                  textAlign: "center",
                  color: "#f60",
                  alignItems: "center",
                  fontSize: "30px",
                  fontWeight: "bold",
                }}
              >
                ￥50<span style={{ color: "#ccc", fontSize: "18px" }}> 起</span>
              </p>
            </div>
          </div>
          <div className={styles.jq} onClick={goDetail}>
            <div>
              <img src={tam} />
            </div>
            <div>
              <h5>天安门城楼</h5>
              <p>北京 | 距您13.8km</p>
              <p>4.9分 | 3.8万人点评</p>
            </div>
            <div>
              <p
                style={{
                  textAlign: "center",
                  color: "#f60",
                  alignItems: "center",
                  fontSize: "30px",
                  fontWeight: "bold",
                }}
              >
                ￥20<span style={{ color: "#ccc", fontSize: "18px" }}> 起</span>
              </p>
            </div>
          </div>
        </Tabs.Tab>
        <Tabs.Tab title="价格" key="2"></Tabs.Tab>
      </Tabs>
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  );
}

export default Listt;
export const loader = async () => {
  let { data: res } = await getac();
  let { data: ree } = await getLocation();
  return { tab: res, location: ree.city };
};
